<template>
    <div id="teamPage">
        <form action="/">
            <van-search
            v-model="searchText"
            show-action
            placeholder="请输入内容进行搜索"
            @search="onSearch"
            @cancel="onCancel"
            />
        </form>
        <div v-for="team in teams" :key="team.id">
            <van-card
            style="text-align: left;"
            :desc="team.description"
            :title="team.name"
            >
            <template #thumb>
                <van-image
                    width="60px"
                    height="60px"
                    fit="cover"
                    position="left"
                    :src="defaultTeamImge"
                />
            </template>
            <template #bottom>
                <span>最大人数：{{ team.maxNum }}</span>
                <div>创建时间：{{ team.createTime }}</div>
                <div>过期时间：{{ team.expireTime }}</div>
            </template>
            <template #tags>
                <van-tag style="margin-right: 8px;" round type="primary">{{ teamStatus[team.status] }}</van-tag>
            </template>
            <template #footer>
                <van-button size="mini" type="primary" plain @click="joinTeam(team)">加入队伍</van-button>
            </template>
            </van-card>
        </div>
        <van-button round type="success" @click="addTeam"
        style="position: fixed;
                bottom: 80px;  /* 距离底部20px */
                right: 20px;   /* 距离右侧20px */
                z-index: 1000; /* 确保按钮在其他元素之上 */" >创建队伍</van-button>
        <van-dialog v-model:show="passwordDialog" title="输入密码" show-cancel-button @confirm="joinSecretTeam">
            <van-field
            v-model="tempPassword"
            name="password"
            label="队伍密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
        </van-dialog>
        <van-empty v-if="teams.length === 0" image="search" description="暂无信息" />
    </div>
    
</template>

<style scoped>
.vn-toast--text{
    background: rgba(0, 0, 0, 0.7);
}
</style>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Myaxios from '../plugins/MyAxios'
import { showSuccessToast, showToast, showFailToast } from 'vant';
import { teamStatus } from '../constants/teamStatus'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant';
import defaultTeamImge from '../tempImageFiles/defaultTeam.png'

const form = reactive({
  description: "",
  name: "",
  pageNum: 1,
  pageSize: 10,
  status: 0
})
const joinTeamForm = reactive({
    id: "",
    password: ""
})
const teams = ref([])
const router = useRouter()
const passwordDialog = ref(false)
const tempPassword = ref("")
const searchText = ref('')
const searchBysearchTextForm = reactive({
    searchText: ""
})

//页面加载，用户是否登录
onMounted(()=>{
    getUser();
})


//获取未加入的队伍列表
const getTeamList = async () => {
    const res = await Myaxios.post('/userNotJoinTeam', form)
    if(res.data.code == 200){
        teams.value = res.data.data
    }
    else{
        showToast("获取信息失败" + "," + res.data.message);
    }
}

//加入加密队伍
const joinSecretTeam = async ()=> {
    joinTeamForm.password = tempPassword.value
    const res = await Myaxios.post("/joinTeam",joinTeamForm);
       if(res.data.code == 200){
          showSuccessToast({
            message: "加入队伍成功",
          }); 
       }else{
        showFailToast({
            message: "加入队伍失败" + res.data.message,
        });
       }
       location.reload()
}
//加入公开队伍
const joinTeam = async (team) => {
    joinTeamForm.id = team.id;
    //如果状态为加密，弹出密码框
    if(team.status == 2){
        passwordDialog.value = true
    }
    else{
       const res = await Myaxios.post("/joinTeam",joinTeamForm);
       if(res.data.code == 200){
          showSuccessToast({
            message: "加入队伍成功",
          });
          router.push({
        path: '/team',
        replace: true
    })
       }else{
        showFailToast({
            message: "加入队伍失败" + res.data.msg,
        });
       }
    }

}

const getUser = async ()=>{
    const res = await Myaxios.post("/currentUser");
    if(res.data.code === 402){
        router.push({
            path: '/login',
        });
    }
    if(res.data.code === 200){
        //用户登录，获取队伍列表
        getTeamList()
    }
}

//创建队伍
const addTeam = () => {
    router.push({
        path: '/team/add'
    })
}

const onSearch = async (val) => {
    searchBysearchTextForm.searchText = val
    const res = await Myaxios.post('/listAllTeam', searchBysearchTextForm)
    if(res.data.code === 200){
        teams.value = res.data.data
    }
    else{
        showFailToast("搜索失败" + res.data.message)
    }
};


const onCancel = () => {
    searchText.value = "";
    Tagitems.value = originalTagItems;
};

</script>